<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    ul,li{
        list-style: none;
    }
    body{
        position: relative;
        width: 100%;
        overflow-x: hidden;
    }
    .top,.colsg_inner,.introduce{
        margin: auto;
        width: 1180px;
        height: 32px;
        line-height: 32px;
        background: #eee;
        color: #666;
        font-size: 12px;
    }
    .top-left{
        float: left;
    }
    .top-right{
        float: right;
    }
    .top-right img{
        position: relative;
        top: 4px;
    }
    .colsg_inner{
        height: 120px;
        background: #fff;
    }
    .droppable{
        float: left;
        width: 360px;
        padding: 30px 0;
    }
    .droppable2{
        float: right;
        width: 820px;
    }
    .droppable2 ul{
        margin-left: 70px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .droppable2 ul li:hover{
        color: #eee;
        background-color: #1861ae;
    }
    .droppable2 ul li{
        float: left;
        width: 120px;
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #333;
        font-size: 15px;
    }
    .droppable2 ul li span:nth-child(2){
        color: #ccc;
        font-size: 12px;
    }
    .lunbo{
        position: relative;
        width: 100%;
        height: 546px;
    }
    .lunbo ul{
        position: absolute;
        display: flex;
        float: left;
        width: 200%;
        height: 100%;
        transition: 1s;
    }
    .lunbo ul li {
        width: 100%;
        height: 546px;
        cursor: pointer;
    }
    .changebutton{
        position: absolute;
        top: 280px;
        width: 100%;
        height: 29px;
        color: #fff;
        cursor: pointer;
    }
    .changebutton span{
        width: 12px;
        font-size: 20px;
        font-weight: 700;
    }
    .changebutton span:nth-child(2){
        float: right;
    }
    .introduce{
        position: relative;
        height: 92px;
        background-color: #fff;
        border-bottom: 1px solid gray;
    }
    .introduce::before{
        z-index: 2;
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        width: 110px;
        height: 3px;
        background-color: #0b76e4;
    }
    .index_about{
        position: absolute;
        height: 30px;
        padding-bottom: 12px;
        margin-top: 50px;
    }
    .index_about .title{
        position: relative;
        font-size: 26px;
        color: #333;
        font-weight: normal;
        width: 1100px;
        float: left;
        line-height: 30px;
    }
    .index_about .title span{
        position: absolute;
        float: right;
        color: #0b76e4;
    }
    .index_about .more{
        position: relative;
        float: right;
        width: 80px;
        line-height: 30px;
        font-size: 14px;
        text-align: right;
    }
    .content,.product,.other{
        position: relative;
        margin: 20px auto auto auto;
        width: 1180px;
        height: 260px;
        display: flex;
    }
    .content_left{
        width: 370px;
        height: 230px;
        margin-right: 20px;
    }
    .content_right{ 
        text-indent: 2em;
    }
    .content_right a{
        margin-left: 2em;
        color: #1861ae;
    }
    .product{
        height: 602px;
    }
    .product_left{
        width: 260px;
        height: 518px;
    }
    .product_left .list{
        width: 100%;
        height: 100%;
        text-align: center;
    }
    .product_left .list .item{
        height: 44px;
        line-height: 44px;
        background-color: #eee;
        border-bottom: 1px solid #fff;
    }
    .product_left .list .item:hover{
        color: red;
        cursor: pointer;
    }
    .product_left .list .item:nth-child(1){
        height: 68px;
        line-height: 68px;
        background-color: #076ad2;
        color: #fff;
    }
    .product_right{
        margin-left: 46px;
        width: 874px;
        height: 602px;
    }
    .product_introduce{
        width: 874px;
        margin-top:-50px;
    }
    .product_introduce .index_about{
        width: 874px;
    }
    .product_introduce .index_about .more{
        margin-top: -30px;
    }
    .product_lunbo{
        width: 874px;
        height: 504px;
        padding: 10px;
        margin-top: 30px;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .product_lunbo ul{
        width: 250px;
        height: 520px;
        position: relative;
    }
    .product_lunbo ul li{
        width: 232px;
        height: 228px;
        margin: 10px;
        text-align: center;
        border: 1px solid #eee;
        background-color: #eee;
    }
    .product_lunbo ul li:hover{
        background-color: #076ad2;
        border: 1px solid #076ad2;
        color: #fff;
        cursor: pointer;
    }
    .product_lunbo ul li img{
        width: 230px;
        height: 184px;
    }
    .product_lunbo ul li span{
        width: 230px;
        height: 44px;
        line-height: 44px;
    }
    .new_introduce{
        width: 732px;
    }
    .new_introduce .index_about{
        width: 732px;
    }
    .new_introduce .index_about .more{
        margin-top: -30px;
    }
    .contact_introduce{
        width: 396px;
    }
    .contact_introduce .index_about{
        width: 396px;
    }
    .contact_introduce .index_about .more{
        margin-top: -30px;
    }
    .other{
        height: 432px;
    }
    .other_left{
        width: 732px;
        height: 432px;
    }
    .other_left_content{
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
    }
    .other_left_content ul {
        width: 348px;
        height: 308px;
        background-color: #eee;
    }
    .other_left_content ul li img{
        width: 100%;
        height: 100%;
    }
    .other_left_content ul .title{
        width: 348px;
        height: 124px;
        display: flex;
        flex-direction: column;
        padding: 10px;
    }
    .other_left_content ul .title span{
        font-size: 12px;
        color: #777;
        line-height: 24px;
        word-wrap: break-word;
    }
    .other_left_content ul .title span:nth-child(1){
        font-size: 16px;
        color: #333;
        line-height: 46px;
        word-wrap: break-word;
    }
    .other_right{
        margin-left: 50px;
        width: 396px;
        height: 396px;
    }
    .other_right_content{
        margin-top: 30px;
    }
    .other_right_content span{
        padding: 10px 0;
        font-size: 14px;
        color: #666;
        line-height: 26px;
    }
    .bottom{
        margin-top: 80px;
        width: 100%;
        height: 166px;
        background-color: #076ad2;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
    }
</style>
<body>
    <!-- 开头 -->
    <div class="top">
        <div class="top-left">欢迎光临苏州康迪电子有限公司官网！</div>
        <div class="top-right"><img src="./image/top-tel.png" alt=""> 咨询热线：0512-63689928</div>
    </div>
    <!-- 目录 -->
    <div class="colsg_inner">
        <div class="droppable">
            <img src="./image/logo.jpg" alt="">
        </div>
        <div class="droppable2">
            <ul>
                <li>
                    <span>网站首页</span>
                    <span>HOME</span>
                </li>
                <li>
                    <span>公司简介</span>
                    <span>ABOUT</span>
                </li>
                <li>
                    <span>展品展示</span>
                    <span>PRODUCT</span>
                </li>
                <li>
                    <span>资料下载</span>
                    <span>DOWNLOADS</span>
                </li>
                <li>
                    <span>新闻动态</span>
                    <span>NEWS</span>
                </li>
                <li>
                    <span>联系我们</span>
                    <span>CONTACT</span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="lunbo">
        <ul>
            <li>
                <img src="./image/slide1.jpg" alt="">
            </li>
            <li>
                <img src="./image/slide2.jpg" alt="">
            </li>
        </ul>
        <div class="changebutton">
            <span class="left"><</span>
            <span class="right">></span>
        </div>
    </div>
    <!-- 公司简介 -->
    <div class="introduce">
        <div class="index_about">
            <span class="title">公司简介<span>/About</span></span>
            <span class="more">更多+</span>
        </div>
    </div>
    <div class="content">
        <div class="content_left">
            <img src="./image/17.jpg" alt="">
        </div>
        <div class="content_right">
            <span>苏州康迪电子有限公司是中外合资生产高频电刀的厂家，成立于1992年。产品已通过ISO9001：2015、ISO13485：2016质量体系认证，产品销往全国各地万多家医院并出口二十多个国家。S900系列高频电刀是采用数字技术和微处理技术设计，其输出功率采用了自动校正技术，适应不同组织、不同阻抗从而对手术质量提供了可靠的要求。该系列高频电刀可用于外科、肝脏外科、直肠外科、泌尿外科、整形外科、骨外科、脑神经外科、微创外科(MIS)、妇产科、耳喉鼻科等科室使用，也可匹配腹腔镜、胸腔镜、子宫镜、膀胱镜等手术，是专业生产高频电刀的制造企业。</span>
            <br>
            <a href="">[查看更多]</a>
        </div>
    </div>
    <!-- 产品中心 -->
    <div class="product">
        <div class="product_left">
            <ul class="list">
                <li class="item">产品中心</li>
                <li class="item">S900B型高频电刀</li>
                <li class="item">S900B型高频电刀</li>
                <li class="item">S900B型高频电刀</li>
                <li class="item">S900B型高频电刀</li>
                <li class="item">S900B型高频电刀</li>
                <li class="item">S900B型高频电刀</li>
                <li class="item">S900B型高频电刀</li>
                <li class="item">S900B型高频电刀</li>
            </ul>
        </div>
        <div class="product_right">
            <div class="introduce product_introduce">
                <div class="index_about">
                    <span class="title">产品展示<span>/Product</span></span>
                    <span class="more">更多+</span>
                </div>
            </div>
            <div class="product_lunbo">
                <ul>
                    <li class="">
                        <img src="./image/32.jpg" alt="">
                        <span>S900B型高频电刀</span>
                    </li>
                    <li class="">
                        <img src="./image/32.jpg" alt="">
                        <span>S900B型高频电刀</span>
                    </li>
                </ul>
                <ul>
                    <li class="">
                        <img src="./image/42.jpg" alt="">
                        <span>S900B型高频电刀</span>
                    </li>
                    <li class="">
                        <img src="./image/42.jpg" alt="">
                        <span>S900B型高频电刀</span>
                    </li>
                </ul>
                <ul>
                    <li class="">
                        <img src="./image/42.jpg" alt="">
                        <span>S900B型高频电刀</span>
                    </li>
                    <li class="">
                        <img src="./image/42.jpg" alt="">
                        <span>S900B型高频电刀</span>
                    </li>
                </ul>
                <ul>
                    <li class="">
                        <img src="./image/42.jpg" alt="">
                        <span>S900B型高频电刀</span>
                    </li>
                    <li class="">
                        <img src="./image/42.jpg" alt="">
                        <span>S900B型高频电刀</span>
                    </li>
                </ul>
                <ul>
                    <li class="">
                        <img src="./image/42.jpg" alt="">
                        <span>S900B型高频电刀</span>
                    </li>
                    <li class="">
                        <img src="./image/42.jpg" alt="">
                        <span>S900B型高频电刀</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 新闻动态 -->
    <div class="other">
        <div class="other_left">
            <div class="introduce new_introduce">
                <div class="index_about">
                    <span class="title">新闻动态<span>/News</span></span>
                    <span class="more">更多+</span>
                </div>
            </div>
            <div class="other_left_content">
                <ul>
                    <li>
                        <img src="./image/66.jpg" alt="">
                    </li>
                    <li class="title">
                        <span>高频电刀简要原理</span>
                        <span>高频电刀简要原理是利用高频放电对人体组织进行切割并凝血的一种手术装置，是医院手术切割凝血的主流设备。...</span>
                    </li>
                </ul>
                <ul>
                    <li>
                        <img src="./image/65.jpg" alt="">
                    </li>
                    <li class="title">
                        <span>高频电刀管理</span>
                        <span>设备在每台手术使用前，应通过对其单、双极输出能量的常规定性检测。</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="other_right">
            <div class="introduce contact_introduce">
                <div class="index_about">
                    <span class="title">联系我们<span>/Contact</span></span>
                    <span class="more">更多+</span>
                </div>
            </div>
            <div class="other_right_content">
                <img src="./image/1A.jpg" alt="">
                <span>地 址：江苏省苏州市吴江梅堰镇梅新街58号</span><br>
                <span>总经理：0512-63681198  013806252162</span><br>
                <span>业务经理 ：0512-63689928  013606255712</span><br>
                <span>传 真：0512-63688186</span><br>
                <span>邮 箱：13606255712@163.com</span><br>
                <span>微信号:kd5712  QQ:978887393</span>
            </div>
        </div>
    </div>
    <div class="bottom">
        <span>地址：江苏省苏州市吴江梅堰梅新街58号    电话：0512-63681198</span>
        <span>Copyright © 2017 苏州康迪电子有限公司       技术支持：仕德伟科技       苏ICP备16042732号</span>
        <a href="http://www.beian.suzhou.gov.cn/license?id=2210">
            <img src="./image/szicbok.gif" alt="">
        </a>
    </div>
</body>
</html>
<script>
    let imgs = document.querySelectorAll(".lunbo ul li")
    let content = document.querySelector(".lunbo ul")
    let index = 0
    let leftbutton = document.querySelector(".left")
    let rightbutton = document.querySelector(".right")
    let timer = setInterval(()=>{
        index++
        content.style.left = - index * imgs[0].clientWidth +"px"
        if(index > 1){
            index = 0
            content.style.left = 0 + "px"
        }
    },3000)
    
</script>